<template>
  <div class="ProductSort">
    <Popup
      v-model="show"
      position="right"
      :style="{ width: '80%', height: '100%' }" >
      <div class="close-sort"
        @click="closePop()">
        关闭
      </div>
    <TreeSelect
      :items="treeData"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      @click-item="clickItem"
    />
    </Popup>
  </div>
</template>

<script>
import { TreeSelect, Popup } from 'vant'
export default {
  name: 'ProductSort',
  components: {
    TreeSelect,
    Popup
  },
  data () {
    return {
      items: [],
      activeId: 0,
      activeIndex: 999,
      show: false
    }
  },
  props: {
    treeData: {
      type: Array
    }
  },
  created () {},
  mounted () {},
  methods: {
    showPop () {
      this.show = true
    },
    closePop () {
      this.show = false
    },
    clickItem (data) {
      this.show = false
      this.$emit('clickSort', data)
    }
  }
}
</script>

<style scoped lang="scss">
  .ProductSort {
    .close-sort {
      text-align: center;
      color: #ffffff;
      background-color: #66b1ff;
      line-height: 40px;
    }
  }
</style>
